import React, { Component, PureComponent } from 'react'
import { getRecommendListApi } from "@/api/goods"
import { InfiniteScroll } from 'antd-mobile'
import style from "./index.module.scss"
import { withRouter } from "react-router-dom";
 class index extends PureComponent {
  state = {
    recommendList: [],
    hasMore:false,
    page:1,
    count:9,
    num:0,
  }
  componentDidMount(){
    this.getRecommendList();
  }
  goDetail=(res)=>{
    console.log(res);
    // console.log('this.props',this.props);
    this.props.history.push({pathname:"/Details",search:`?id=${res}`})
  }
  getRecommendList=async()=>{
      let res = await getRecommendListApi({
          page:this.state.page,
          count:this.state.count
      });
      // console.log(res);
      if(res.data.code===200){
         this.state.recommendList.push(...res.data.list)
         this.setState({
          recommendList:this.state.recommendList,
          page:this.state.page+1,
          hasMore:true,
         },()=>{
          console.log('this.state.page',this.state.page);
          console.log('this.state.recommendList',this.state.recommendList.length);
         })
         
      }
  }
 
  // 加载更多
  render() {
    return (
     <>
      <ul className={style.recommend} >
        {this.state.recommendList.map((item, index) => {
          return (
            <li key={index} className={style.recommendli} onClick={()=>{this.goDetail(item.id) }}>
              <img src={ item.pic} alt={item.id}/>
              <h5>{item.name}</h5>
              <span>原价¥{item.salesPrice.value}</span>
              <p className={style.price}>抢购价¥<span>{item.salesPrice.value}</span></p>
            </li>
          )
        })}
      </ul>
      <InfiniteScroll loadMore={this.getRecommendList} hasMore={this.state.hasMore} />
     </>
    )
  }
}
export default withRouter(index)